<template>
	<div class="authorization">
		<div class="header">
			<div class="left">
				<img src="../../assets/img/lock-service.png" alt="" />
				<span class="title">加密锁服务</span>
			</div>
		</div>
		<div class="content">
			<div class="table-content">
				<div class="single" @click="openModal">
					<img src="../../assets/img/repeat.png" alt />
					<span class="title">续订</span>
					<span class="desc">加密锁续订业务</span>
				</div>
				<div class="single" @click="openReportLostModal"> 
					<img src="../../assets/img/report-lost.png" alt />
					<span class="title">挂失</span>
					<span class="desc">加密锁挂失</span>
				</div>
				<div class="single">
					<img src="../../assets/img/expect.png" alt />
					<span class="desc">更多功能，敬请期待</span>
				</div>
			</div>
		</div>
		<product-renewal
			v-model:visible="renewalVisible"
			:isLock="propData"
		></product-renewal>
		<report-for-loss v-model:visible="reportVisible"></report-for-loss>
	</div>
</template>

<script setup>
import ProductRenewal from "./product-renewal.vue";
import { ref } from "vue";
import ReportForLoss from '../user/report-for-loss.vue';
let renewalVisible = ref(false);
let propData = ref(null);
const reportVisible = ref(false);

const openModal = () => {
	propData.value = null;
	renewalVisible.value = true;
};
const openReportLostModal = () => {
	reportVisible.value = true;
}
</script>

<style lang="scss" scoped>
.authorization {
	background: #f7f7f7;
	height: calc(100vh - 50px);
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120px;
		padding: 0 32px 0 60px;
		background: url("../../assets/img/user-bg.png");
		.title {
			font-size: 30px;
			color: #ffffff;
			margin-left: 14px;
		}
		.ant-btn {
			background: transparent;
			color: #ffffff;
		}
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
		.table-content {
			display: table;
			flex-wrap: wrap;
			width: 726px;
			height: 417px;
			background: #ffffff;
			border: 1px solid #d9d9d9;
			.single {
				display: table-cell;
				vertical-align: middle;
				width: 33%;
				height: 134px;
				text-align: center;
				border-right: 1px solid #d9d9d9;
				border-bottom: 1px solid #d9d9d9;
				span {
					display: block;
					margin-top: 6px;
					vertical-align: middle;
				}
				.title {
					font-size: 14px;
					color: #333333;
				}
				.desc {
					font-size: 10px;
					color: #898989;
				}
			}
			.single:nth-of-type(3n) {
				border-right: none;
			}
		}
	}
}
</style>
